
<template>
    <div class="student">
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <button @click="sendStudentName">点我把学生名给App</button>
        <button @click="unbind">解绑atguigu事件</button>
        <button @click="death">销毁当前Student组件</button>
    </div>
</template>

<script>
export default {
    name: "StudentInfo",
    data() {
        return {
            name: "胡桃",
            sex: "女",
        };
    },
    methods: {
        sendStudentName() {
            //触发Student组件实例的atguigu事件
            this.$emit("atguigu", this.name);
            this.$emit("demo");
        },
        unbind() {
            //this.$off("atguigu"); //解绑一个自定义事件
            //this.$off(["atguigu", "demo"]); //解绑多个自定义事件
            this.$off(); //解绑所有自定义事件
        },
        death() {
            this.$destroy();
        },
    },
};
</script>

<style scoped lang="less">
.student {
    padding: 5px;
    background-color: rgb(247, 151, 218);
}
</style>